<script setup lang="ts">
import {get} from "@/assets/ts/ruquestMethod";
import {onMounted} from "vue";
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import {useRoute} from "vue-router";
import AccountInfo from "@/components/account/Index/accountInfo.vue";
import CartInfo from "@/components/account/Index/cartInfo.vue";
import OrderInfo from "@/components/account/Index/orderInfo.vue";

const {params,query} = useRoute()
const name = params.userid as string
const type = query.type || 'first'
const activeName = ref(type)

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>

<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" type="border-card">
        <el-tab-pane label="用户信息" name="first">
            <div style="width: 80%;margin-left: 10%">
                <account-info :username="name"/>
            </div>
        </el-tab-pane>
        <el-tab-pane label="购物车" name="second">
          <cart-info></cart-info>
        </el-tab-pane>
        <el-tab-pane label="订单" name="third">
          <order-info></order-info>
        </el-tab-pane>
    </el-tabs>
</template>

<style scoped>

</style>